<template>
  <div class="balance-account-container">
    <!-- 操作按钮 -->
    <div class="operation">
      <span class="link" @click="deleteSelectedGoods()">批量删除</span>
      <span class="link">删除失效商品</span>
    </div>
    <!-- 购物车中商品的信息 -->
    <div class="cart-info">
      <div class="price-discount">
        <div class="row">
          <span class="name">商品合计：</span>
          <span class="value">{{ $t('priceSymbol') }}{{ priceInfo.totalPrice | price }}</span>
        </div>
        <div class="row">
          <span class="name">已优惠</span>
          <span class="value">-{{ $t('priceSymbol') }}{{ priceInfo.accountPrice | price }}</span>
        </div>
      </div>
      <!-- 应付金额 -->
      <div class="pay-price">
        <div class="total-pay">应付总额：<span class="pay-price">{{ $t('priceSymbol') }}{{ priceInfo.payPrice | price }}</span></div>
        <div class="benefit">再购￥56.10免邮，去凑单 &gt;</div>
      </div>
      <!-- 支付按钮 -->
      <div class="pay-button">下单</div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['priceInfo'])
  },

  methods: {
    ...mapActions(['deleteSelectedGoods'])
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable";

.balance-account-container {
  align-items: center;
  background-color: @bg-grey;
  border: 1px solid @border-grey;
  display: flex;
  font-size: 14px;
  height: 70px;
  justify-content: space-between;
  .operation {
    .link {
      cursor: pointer;
      font-size: 14px;
      margin-left: 30px;
      &:hover {
        color: @font-color-golden;
      }
    }
  }
  .cart-info {
    display: flex;
    .price-discount {
      border-right: 1px solid @border-grey;
      padding: 0px 30px;
      margin: 4px 0px;
      .row {
        color: @font-color-grey;
        display: flex;
        font-size: 14px;
        height: 32px;
        justify-content: space-between;
        padding-top: 6px;
        &:first-child {
          padding-top: 14px;
        }
      }
    }
    .pay-price {
      padding: 0px 30px;
      margin: 4px 0px;
      .total-pay {
        height: 32px;
        padding-top: 6px;
        .pay-price {
          color: @font-color-red;
          font-size: 22px;
          font-weight: 700;
        }
      }
      .benefit {
        color: #d3282d;
        height: 32px;
        padding-top: 6px;
      }
    }
    .pay-button {
      align-items: center;
      background-color: @font-color-golden;
      color: @write;
      cursor: pointer;
      display: flex;
      font-size: 18px;
      width: 140px;
      height: 70px;
      margin-top: 1px;
      justify-content: center;
    }
  }
}
</style>
